css hacks (ie6,ie7,ie8,firefox)
IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE8能识别"
\9",但不能识别下划线"_",而firefox两个都不能认识,却可以识别‘!important’。等等
书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面列举常用的CSS hack方法
1:!important
!important作用是提高指定样式规则的应用优先权。
IE7以及所有标准浏览器能识别!important
区别IE6与IE7与其他浏览器
.browserTest
{
border:20px solid #60A179 !important;
border:20px solid #00F;
}
在Mozilla中或者IE7浏览时候,能够理解!important的优先级,因此显示#60A179的颜色:
在IE6中浏览时候,不能够理解!important的优先级,因此显示#00F的颜色:
2:*
IE都能识别*;标准浏览器(如火狐)不能识别*
区别IE6与火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
}
区别IE7与火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
}
区别IE7,IE6与火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F !important;
*border:20px solid ###;
}
3:_
IE6支持下划线,IE7和firefox均不支持下划线
区别IE7,IE6与火狐
.browserTest
{
border:20px solid #60A179;
*border:20px solid #00F;
_border:20px solid ###;
}
4:*+html 与 *html
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签
.browserTest { width: 120px; }
*html .browserTest { width: 80px;}
*+html .browserTest { width: 60px;}
3:\9 专属IE8的Hack
.browserTest { width: 120px\9; }
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
以下是一些常用的CSS兼容技巧
1)火狐下给div设置padding后会导致 width和height 增加, 但IE不会.(可用!important解决)
2)垂直居中,将 line-height设置为当前div相同的高度, 再通过vertical-align: middle;( 注意内容不要换行)
3)水平居中,margin:0 auto;(当然不是万能)
4)若需给a标签内内容加上样式, 需要设置 display: block;(常见于导航标签)
5)浮动IE产生的双倍距离
在IE下,当一个div设置了float后,然后给他设置margin,就会出现加倍的margin,解决的办法是给div设置 display:inline。
<div id=”float”></div>
相应的css为
#float
{
float:left;
margin:5px;
display:inline;
}
Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
6)IE和FF对盒模型的解释区别
#browserTest{ width: 650px !important;width: 648px;padding-left:2px;background:#fff; }
browserTest显示的宽度是650px;
IE Box的总宽度是:width+padding+border+margin宽度总和;
FF Box的总宽度就是:width的宽度,padding+border+margin的宽度在含在width内。
如果有BOX{WIDTH:"300"; PADDING:"5PX";}
则BOX在IE的宽度应该为:310
而在FF的宽度则是300
所以在BOX有填充的情况下应该这样使用
BOX{WIDTH:"300" !IMPORTANT; WIDTH:"290";}
7)ul标签在 FF下面默认有list-style和padding, 最好事先声明, 以避免不必要的麻烦;(常见于导航标签和内容列表)
8)作为外部wrapper的div不要定死高度, 最好还加上 overflow: hidden;以达到高度自适应;
9)页面的最小宽度
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类:
然后CSS这样设计:
#container{ min-width: 600px; width:expression_r(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 顺序如下:
Firefox -> IE6 -> IE7 -> 其他
说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.
1. 同一文件中处理.
如: id="bgcolor" 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色.
1 |
#bgcolor { |
IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue.
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.
上述的优先符号均是 CSS3 标准允许的, 其他浏览器也还有其他的 Hack 方法, 但我迄今还没遇到过 Firefox 正常, IE 以外的其他浏览器不正常的情况, 所以无可分享. 只要代码规范, 相信这种情况的发生应该是很罕见 (JavaScript 除外).
2. 不同文件中处理.
为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器? 这是为了欺骗 W3C 的验证工具, 其实只需要两个文件, 一个是针对所有浏览器的, 一个只为 IE 服务. 将所有符合 W3C 的代码写到一个里面去, 而一些 IE 中必须的, 又不能通过 W3C 验证的代码 (如: cursor:hand;) 放到另一个文件中, 再用下面的方法导入.
1 |
<!-- 放置所有浏览器的样式 --> |
浏览器的 CSS Hack 方法有很多, 比如 @import 引入, > 过滤等等方法, 但以上就是我用过的全部.
网页前台的兼容不应该仅限于对过去的浏览器支持 (向前兼容), 更应该对未来的浏览器服务 (向后兼容). 因为浏览器的发展很快, 而经常上网的人更新软件的频率是非常高的, 所以向后兼容的意义甚至比先前兼容还来得重要. 如何向后兼容呢? 只要符合标准你的网站就 永远不会过时 (IE 系列除外). 所以我的宗旨是尽量做到标准, 不得已才 Hack, 并尽量使用比较简单的方法去解决.
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助。
IE浏览器都能识别“*” “\9”;标准浏览器(如FF)不能识别“*”;
IE6能识别“_” “+” “#” “@”, 同一属性有两个的只看后者 无论有没有如果是两句它就能识别“!important”;
IE7能识别“+” “#” “@” “!important”,不能识别“_”;
FF能识别“!important”,不能识别“_” “+” “#” “@”;
以上是我自己测试的结果,如有差错还请指出~!
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
例如:select{
Color:blue;//所有浏览器
Color:yellow\9;//所有IE浏览器
*Color:red;//forIE7
_color:green;//forIE6
}
关注过IE8的css hack的人相信大家都在使用这个hack,就是“\9”的css hack:
其中:OP表示Opera,SA表示Safari,Ch表示Chrome;当然你如果还有耐心可以测试 “\14”,“\15”,“\16”。。。
从上面测试结果我们可以看出“\0”的写法只被IE8识别,ie6,ie7都不能识别,那么“\0”应该是IE8的真正hack。主流浏览器的CSS hack这样更好一些:
.test{
color:#000000;
color:#0000FF\0;
[color:#000000;color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}
其中:OP表示Opera,SA表示Safari,Ch表示Chrome;
关注过IE8的css hack的人相信大家都在使用这个hack,就是“\9”的css hack:
|
color:#0000FF\9的hack支持IE6-IE8(其他版本没有测试),但是IE8不能识别“*”和 “_”的css hack,所以我们可以使用
color:#0000FF\9; ;
*color:#FFFF00;
_color:#FF0000;
来区分IE的各个版本。
说到了这个\/* SF,CH支持 *\/经过本人测试,这个ie系列都支持,而且ff会把他解析为上下top和bottom,从而影响以上两个地方的位置。
IE6 | IE7 | IE8 | firexfox 2 | firefox 3 | opera 9.5 | |
>property | Y | Y | N | N | N | N |
+property | Y | Y | N | N | N | N |
.property | Y | Y | N | N | N | N |
*property | Y | Y | N | N | N | N |
_property | Y | N | N | N | N | N |
*html p{ } | Y(IE5.5 Y) | N | N | N | N | N |
*+html p{ } | N | Y | N | N | N | N |
property:value\0; | N | N | Y(IE9 Y) | N | N | N |
property:value\0/; | N | N | Y(IE9 N) | N | N | N |
*+property | Y | Y | N | N | N | N |
property:value\9; | Y | Y | Y | N | N | N |
[property | Y | Y | N | N | N | N |
property//:value | N | Y | Y | Y | Y | Y |
1.区别IE和非IE浏览器
#tip {
background:blue; /*非IE 背景蓝色*/
background:red \9; /*IE6、IE7、IE8背景红色*/
}
2.区别IE6,IE7,IE8,FF
【区别符号】:“\9”、“*”、“_”
【示例】:
#tip {
background:blue; /*Firefox 背景变蓝色*/
background:red \9; /*IE8 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:因为IE系列浏览器可读“\9”,而IE6和IE7可读 “*”(米字号),另外IE6可辨识“_”(底线),因此可以依照顺序写下来,就会让浏览器正确的读取到自己看得懂得CSS语法,所以就可以有效区分IE 各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。
3.区别IE6、IE7、Firefox (方法 1)
【区别符号】:“*”、“_”
【示例】:
#tip {
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:IE7和IE6可读“*”(米字号),IE6又可以读“_”(底线),但是IE7却无法读取“_”,至于Firefox(非IE浏览器)则完全无法辨识“*”和“_”,因此就可以透过这样的差异性来区分IE6、IE7、Firefox
4.区别IE6、IE7、Firefox (方法 2)
【区别符号】:“*”、“!important”
【示例】:
#tip {
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
*background:orange; /*IE6 背景变橘色*/
}
【说明】:IE7可以辨识“*”和“!important”,但是IE6只可以辨识“*”,却无法辨识“!important”,至于Firefox可以读取“!important”但不能辨识“*”因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。
5.区别IE7、Firefox
【区别符号】:“*”、“!important”
【示例】:
#tip {
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
}
【说明】:因为Firefox可以辨识“!important”但却无法辨识“*”,而IE7则可以同时看懂“*”、“!important”,因此可以两个辨识符号来区隔IE7和Firefox。
6.区别IE6、IE7 (方法 1)
【区别符号】:“*”、“_”
【示例】:
#tip {
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:IE7和IE6都可以辨识“*”(米字号),但IE6可以辨识“_”(底线),IE7却无法辨识,透过IE7无法读取“_”的特性就能轻松区隔IE6和IE7之间的差异。
7.区别IE6、IE7 (方法 2)
【区别符号】:“!important”
【示例】:
#tip {
background:black !important; /*IE7 背景变黑色*/
background:orange; /*IE6 背景变橘色*/
}
【说明】:因为IE7可读取“!important;”但IE6却不行,而CSS的读取步骤是从上到下,因此IE6读取时因无法辨识“!important”而直接跳到下一行读取CSS,所以背景色会呈现橘色。
8.区别IE6、Firefox
【区别符号】:“_”
【示例】:
#tip {
background:black; /*Firefox 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:因为IE6可以辨识“_”(底线),但是Firefox却不行,因此可以透过这样的差异来区隔Firefox和IE6,有效达成CSS hack。
9.IE的if条件hack写法:
所有的IE可识别:
<!–[if IE]> Only IE <![end if]–>
只有IE5.0可以识别:
<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
IE5.0包括IE5.5都可以识别:
<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
仅IE6可识别:
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6以及IE6以下的IE5.x都可识别:
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
仅IE7可识别:
<!–[if lte IE 7]> Only IE 7/- <![end if]–>
【示例】:
< !–- 默认先调用css.css样式表 –->
<link rel="stylesheet" type="text/css" href="css.css" />< !-–[if IE 7]>
<!–- 如果IE浏览器版是7,调用ie7.css样式表- –>
<link rel="stylesheet" type="text/css" href="ie7.css" />< ![endif]–->
<!–-[if lte IE 6]>
<!–- 如果IE浏览器版本小于等于6,调用ie.css样式表 -–>
<link rel="stylesheet" type="text/css" href="ie.css" />< ![endif]–>
10.补充
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*仅IE6*/
*+html .searchInput {background-color:#555;}/*仅IE7*/
IE6 | IE7 | FF | |
_ | √ | × | × |
* | √ | √ | × |
!important | × | √ | √ |